<template>
  <div>
    <tc-header :title="title" :leftIcons="leftIcons" :rightIcons="rightIcons"></tc-header>
    <tc-flex class="quotes-status">
      <span class="name">{{ status.name }}</span>
      <span class="time">{{ status.time }}</span>
    </tc-flex>
    <tc-scroll-view :filling="true" :height="height">
      <tc-flex class="quotes-list" direction="column">
        <tc-card v-for="(item, index) in list" :key="index">
          <tc-flex class="quotes-item" >
            <div class="flex-fl">
              <tc-flex class="title flex-fl" direction="column">
                <span class="name">{{ item.title.name }}</span>
                <span class="value"><span class="tag">最高</span>{{ item.title.max }}</span>
                <span class="value"><span class="tag">最低</span>{{ item.title.min }}</span>
              </tc-flex>
            </div>
            <tc-flex class="flex-fl">
              <tc-flex class="sellbuy" direction="column">
                <span class="name">卖出</span>
                <tc-flex>
                  <span class="prefix" :style="{ color: item.sell.status.color }">{{ item.sell.title }}
                    <span class="suffix">{{ item.sell.suffix }}</span>
                  </span>
                  <tc-icon :style="{ color: item.sell.status.color }" :icon="item.sell.status.icon"></tc-icon>
                </tc-flex>
                <span class="value" :style="{ color: item.sell.status.color }">{{ item.sell.value }}</span>
              </tc-flex>
            </tc-flex>
            <tc-flex class="flex-fl">
              <tc-flex class="sellbuy" direction="column">
                <span class="name">买入</span>
                <tc-flex>
                  <span class="prefix" :style="{ color: item.sell.status.color }">{{ item.sell.title }}
                    <span class="suffix">{{ item.sell.suffix }}</span>
                  </span>
                  <tc-icon :style="{ color: item.sell.status.color }" :icon="item.sell.status.icon"></tc-icon>
                </tc-flex>
                <span class="value" :style="{ color: item.sell.status.color }">{{ item.sell.value }}</span>
              </tc-flex>
            </tc-flex>
          </tc-flex>
        </tc-card>
      </tc-flex>
    </tc-scroll-view>
  </div>
</template>

<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.theme(@background-color, @stop-color){
  .quotes-status{
    width: 100%;
    background-color: @background-color;
    height: @status-height;
    font-size: @font-size-md;
    color: @rgb-white;
    position: absolute;
    top: @tc-header-height;
    left: 0;
    z-index: 88;

    .name{
      flex: 1;
      text-align: start;
      margin-left: @status-separation;
    }

    .time{
      margin-right: @status-separation;
    }
  }

  .status-stop{
    background-color: @stop-color;
  }

  .quotes-list{
    margin-top: @tc-header-height + @status-height;

    .quotes-item{
      height: @pixel-200;

      .flex-fl{
        flex: 1;
      }

      .title{
        border-right: @border-value;
        border-color: rgba(0, 0, 0, 0.4);

        .name{
          font-size: @pixel-32;
          color: #2C2C2C;
          margin-bottom: @separation;
        }

        .value{
          font-size: @pixel-24;
          color: #8E8E93;
          .tag{
            font-size: @pixel-20;
            margin-right: @separation;
          }
        }
      }

      .sellbuy{
        align-items: flex-start;

        .name{
          font-size: @pixel-20;
          color: #8E8E93;
        }
        
        .prefix{
          font-size: @pixel-32;

          .suffix{
            font-size: @pixel-54;
            margin-right: @separation;
          }
        }
        .value{
          font-size: @pixel-24;
        }
      }
    }
  }
}
.theme-default{
  .theme(@status-color, @status-stop-color)
}
.theme-dark{
  .theme(@status-color, @status-stop-color)
}
</style>


<script src="./QuotesPage.ts"></script>
